<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>网赢集团</title>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
    <link rel="stylesheet" href="css/default.css" />
    <link rel="stylesheet" type="text/css" href="css/classify.css"/>
</head>
<body>
	<div class="mui-content">
		<div class="mui-input-row mui-search">
			<input type="search" class="mui-input-clear" placeholder="小程序">
		</div>
		
		<div class="mui-row mui-fullscreen">
			<div class="mui-col-xs-3">
				<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
				</div>
			</div>
			<div id="segmentedControlContents" class="mui-col-xs-9">
				<div id="item1" class="mui-control-content mui-active">
				</div>
				<div id="item2" class="mui-control-content">
				</div>
				<div id="item3" class="mui-control-content">
				</div>
			</div>
		</div>
	</div>
	
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item" id="index">
			<span class="mui-icon iconfont icon-shouye1"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item mui-active" id="classify">
			<span class="mui-icon iconfont icon-fenlei"></span>
			<span class="mui-tab-label">分类</span>
		</a>
		<a class="mui-tab-item" id="shopping">
			<span class="mui-icon iconfont icon-gouwuche"></span>
			<span class="mui-tab-label">购物车</span>
		</a>
		<a class="mui-tab-item" id="mine">
			<span class="mui-icon iconfont icon-wode"></span>
			<span class="mui-tab-label">我的</span>
		</a>
	</nav>
	<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var t = Math.random();
		$('#index').on('tap', function() {
			window.location.href = "index.html?t=" + t;
		});
		$('#classify').on('tap', function() {
			window.location.href = "classify.html?t=" + t;
		});
		$('#shopping').on('tap', function() {
			window.location.href = "shopping.html?t=" + t;
		});
		$('#mine').on('tap', function() {
			window.location.href = "mine.html?t=" + t;
		});
	</script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
		var controls = document.getElementById("segmentedControls");
		var contents = document.getElementById("segmentedControlContents");
		var html = [];
		var i = 1,
			j = 1,
			m = 5, //左侧选项卡数量+1
			n = 8; //每个选项卡列表数量+1
		for (; i < m; i++) {
			html.push('<a class="mui-control-item" href="#content' + i + '">选项' + i + '</a>');
		}
		controls.innerHTML = html.join('');
		html = [];
		for (i = 1; i < m; i++) {
			html.push('<div id="content' + i + '" class="mui-control-content"><ul class="mui-table-view">');
			for (j = 1; j < n; j++) {
				html.push('<li class="mui-table-view-cell mui-col-xs-6"><img src="img/itemeg.jpg" alt="" /><div class="mui-media-body">培训教育系统' + i + j + '</div><div class="mui-media-body"><span class="true-price">￥8999</span><span class="price">￥12899</span></div></li>');
			}
			html.push('</ul></div>');
		}
		contents.innerHTML = html.join('');
		 //默认选中第一个
		controls.querySelector('.mui-control-item').classList.add('mui-active');
		contents.querySelector('.mui-control-content').classList.add('mui-active');
	</script>

</body>
</html>